import React, { useEffect, useState, useRef } from 'react';
// import { Spin } from 'antd';

import { isSuccess } from '@/utils/request';
import { salaryRecheck } from '@/services/salaryManage/salaryCalculate';

import { convert2StepDisplayInfo } from '@/pages/SalaryManage/constant/recheckConstant';
import CheckSteps from '@/pages/SalaryManage/components/CheckSteps';

import { getCurrentCompanyCode } from '@/pages/SalaryManage/utils';

const { getRecheckSteps } = salaryRecheck;

/**
 *  复核流程步骤
 * @param {String} period 形如YYYY-MM的日期
 * @param {Boolean} loading 是否正在加载中
 * @param {Boolean} showButton 是否展示展出框里的按钮
 * @param {String} organizationCode 行政组织机构编码
 * @returns {JSX.Element|{render(): *}}
 */
const StepList = ({ period, loading = null, showButton = true, organizationCode = getCurrentCompanyCode() }) => {
    const [stepsList, setStepList] = useState(null);
    const [stepsLoading, setStepLoading] = useState(null);
    const loadingPeriodRef = useRef(null);

    const updateStepFn = data => {
        const year = period.substr(0, 4);
        const month = +period.substr(5, 2);
        setStepList(convert2StepDisplayInfo(data || [], year, month, showButton, organizationCode, updateStepFn));
    };

    const getList = () => {
        if (!period || !organizationCode) {
            return;
        }
        setStepList(null)
        loadingPeriodRef.current = { period, organizationCode };
        setStepLoading(true);
        const year = period.substr(0, 4);
        const month = +period.substr(5, 2);
        getRecheckSteps({ year, month, organizationCode })
            .then(response => {
                if (isSuccess(response)) {
                    setStepList(
                        convert2StepDisplayInfo(
                            response.data || [],
                            year,
                            month,
                            showButton,
                            organizationCode,
                            updateStepFn
                        )
                    );
                }
            })
            .finally(() => {
                loadingPeriodRef.current = null;
                setStepLoading(false);
            });
    };

    useEffect(() => {
        if (loading) {
            setStepLoading(true);
        }
    }, [loading]);

    useEffect(() => {
        if (period && loading == null) {
            setStepLoading(true);
        }
    }, [period, loading]);

    useEffect(() => {
        if (organizationCode && loading == null) {
            setStepLoading(true);
        }
    }, [organizationCode, loading]);

    useEffect(() => {
        if (stepsLoading !== true || loadingPeriodRef.current) {
            return;
        }
        if (!period || !organizationCode) {
            setStepList([]);
            return;
        }
        getList();
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [stepsLoading, period, organizationCode]);

    return (
        // <Spin spinning={stepsLoading}>
        <CheckSteps loading={stepsLoading} stepsList={stepsList} hide={
            !(stepsLoading === true || (stepsList?.length > 0))
        } />
        // </Spin>
    );
};

export default StepList;
